<template>
	<view class="page">
		<comHead :datas="datasObj">
			<template #headerContent>
				<view style="height: 262rpx;"></view>
				<view
					style="padding: 30rpx 30rpx 0;box-sizing: border-box;background-color: #fff;border-radius: 40rpx 40rpx 0 0;">
					<view class="time_box bd-r20 flex-bwt pd-20" style="height: 74rpx;">
						<view class="time ft-24 c-66 flex-center" @click="openTime">
							<image class="imgs" src="https://cdn.oss.bon-top.cn/static_bc/images/gold-icon.png"
								mode="aspectFit"></image>
							{{ '可用积分' }}
							<span class="ft-36 ft-num3 c-33">{{ detail.integral_format }}</span>

						</view>
						<view class="rig_box">
							<view class="rig_box_item ft-24 c-33 flex-center"
								@click="goPage('/subpackage/integral/integralOrderList')">

								兑换历史<image class="icon_samll fs0 ml-8"
									src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png" mode="aspectFit">
								</image>
							</view>

						</view>
					</view>
				</view>
			</template>
		</comHead>
		<view class="content_box w-100 pd-30">
			<view class="card_box">
				<view class="card_item flex mb-20 pd-20 bd-r40" v-for="(item, index) in integralList" :key="index">
					<image class="imgBox bd-r40" :src="item.cover" mode="aspectFill">
					</image>
					<view class="contents ml-20 te-wid">
						<view class="text ft-32 ft1 te-1">{{ item.name }}</view>
						<view class="quan flex-bwt mt-40 bd-r20">
							<view class="quan_content">
								<view class="num c-66 ft-22">{{ item.integral }}积分</view>
								<view class="quan_progress ft-24 bd-r8">
									<!-- 进度条 -->
									<view class="progress">
										<view class="progress_color"
											:style="{ width: Math.floor((item.total_num - item.e_num) * 100 / item.total_num) + '%' }">
										</view>
									</view>
									<view class="ft-24">{{ (item.total_num - item.e_num) }}/{{ item.total_num }}</view>
								</view>
							</view>
							<view class="btn" v-if="item.e_num > 0"
								@click="goPage(`/subpackage/integral/integralExchangeInfo?id=${item.id}&num=${detail.integral}`)">
								立即兑换</view>
							<view class="btn full" v-else>名额已满</view>

						</view>
					</view>
				</view>
				<view class="com-empty" v-if="integralList.length == 0">暂无数据</view>
			</view>
		</view>
		<view :style="{ height: (98 + 68) + 'rpx' }"></view>


	</view>
</template>

<script setup lang="js">
import comHead from '@/components/comHead.vue'
import {
	reactive,
	ref
} from 'vue';
import {
	utils
} from '@/utils/utils.js';
import {
	api
} from '@/utils/api.js';
import {
	onShow,
	onLoad,
	onReachBottom
} from "@dcloudio/uni-app";

let datasObj = reactive({
	title: '积分兑换',
	img: 'https://cdn.oss.bon-top.cn/static_bc/images/integralShopping_banner.png',
	color: '#fff',
	direction: '',
	scrollTop: 0,
	backisImg: true,//导航文字模块的背景图
	headerisImg: true,//整个huader模块的背景图
	fullImag: true,//header是否显示完整的图片
	imgHeight: 588,
	height: 452,
})
// 跳转
const goPage = (url) => {
	uni.navigateTo({
		url: url,
	});
}

const reloadData = () => {
	integralPage.value = 1
	integralList.value = []
	integralLoading.value = true
	getIntegralListData()
}

const integralPage = ref(1)
const integralList = ref([])
const integralLoading = ref(true)
const detail = ref({})
const getIntegralListData = () => {
	if (!integralLoading.value) {
		return
	}
	uni.showLoading()
	integralLoading.value = false
	utils
		.request(
			api.getIntegralMallList, {
			page: integralPage.value,
			pageSize: 10
		},
			"get"
		)
		.then((res) => {
			if (Object.keys(detail.value).length == 0) {
				detail.value = res.data
			}
			integralPage.value++
			if (res.data.items.length > 0) {
				integralList.value = integralList.value.concat(res.data.items)
			}
			if (integralPage.value <= res.data.pageInfo.totalPage) {
				integralLoading.value = true
			}
			uni.hideLoading()
		});
}

onLoad((options) => {
	getIntegralListData()
})

onReachBottom(() => {
	getIntegralListData()
})
</script>

<style lang="scss" scoped>
.imgs {
	width: 36rpx;
	height: 36rpx;
}

.time_box {
	background: linear-gradient(to bottom, #F2F2FF, #FFFFFF);
}

.content_box {
	// position: absolute;
	// z-index: 5;
	// top: 250rpx;
	// left: 0;
	// background-color: #fff;
	// border-radius: 40rpx 40rpx 0 0;
	// padding-top: 0;

	.card_box {
		.card_item {
			border: 2rpx solid #F1F1F1;

			.imgBox {
				width: 186rpx;
				height: 232rpx;
			}

			.quan {
				background: linear-gradient(to left, rgba(255, 255, 255, 0.411), #f8f8f8);
				padding: 20rpx 0 20rpx 20rpx;

			}

			.quan_content {
				flex: 1;
				box-sizing: border-box;
				margin-right: 10rpx;


				.quan_progress {
					flex: 1;
					display: flex;
					align-items: center;
					height: 20rpx;
					margin-top: 20rpx;

					.progress {
						height: 100%;
						flex: 1;
						background-color: #F1F1F1;
						border-radius: 20rpx;
						overflow: hidden;
						padding: 0;
						margin: 0;
						margin-right: 20rpx;

						.progress_color {
							background: linear-gradient(to left, #FFBA61, #DBF046);
							border-radius: 20rpx;
							height: 100%;
						}

					}
				}
			}

			.num {
				color: #FF0000;
			}

			.btn {
				// width: 68rpx;
				// height: 68rpx;
				padding: 20rpx;
				background: linear-gradient(to left, #FFBA61, #DBF046);
				border-radius: 16rpx;
			}

			.full {
				background-color: #F1F1F1;
				background: linear-gradient(to left, #333333, #333333);
				color: #fff;
			}

		}
	}
}
</style>